<template>
  <div>
    <el-card>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        max-height="500"
        border
        ref="Table"
      >
        <el-table-column
          prop="id"
          label="合同编号"
          align="center"
          type="index"
          width="100"
        >
        </el-table-column>
        <el-table-column prop="name" label="合同名称" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column prop="templateStyle" label="合同地址" align="center" width="500">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.row)"
              type="text"
              size="small"
              style="color: #FB9678;"
            >
              删除
            </el-button>
            <el-button type="text" size="small" style="color: #FB9678;">
              <a :href="scope.row.templateStyle" download>下载</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="添加维修费"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="false"
      >
        <!-- 内容主体区 -->
        <el-form
          :model="addForm"
          :rules="addFormRules"
          ref="addFormRef"
          label-width="100px"
          label-position="left"
        >
          <!-- <el-form-item label="id" prop="id">
            <el-input v-model="addForm.id"></el-input>
          </el-form-item> -->
          <el-form-item label="合同名称" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="addForm.remark"></el-input>
          </el-form-item>
          <!-- <el-form-item label="合同预览" prop="templateStyle">
            <el-input v-model="addForm.templateStyle"></el-input>
          </el-form-item> -->
          <el-form-item label="合同模板" prop="templateStyle">
            <el-upload
              class="upload-demo"
              accept=".pdf,.docx,.doc"
              action=""
              :auto-upload="false"
              :on-change="handleChange"
              :on-remove="handleRemove"
              list-type="text/picture/picture-card"
              :multiple="false"
              :http-request="uploadImg"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <span slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRow('addFormRef')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 表单 -->
      <!-- 按钮 -->
      <div class="btns">
        <!-- <el-button type="primary" @click="resetForm">提交</el-button> -->
        <el-button type="primary" class="add-btn" @click="dialogVisible = true"
          >添加</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      // 控制添加维修费对话框的显示与隐藏
      dialogVisible: false,
      // 添加维修费表单数据
      addForm: {
        name: "",
        remark: "",
        templateStyle: "",
        // index: 0
      },
      // 添加维修费表单验证
      addFormRules: {
        name: [{ required: true, message: "请输入合同名称", trigger: "blur" }],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        templateStyle: [
          { required: true, message: "请上传文件", trigger: "blur" },
        ],
      },
      // 控制添加对话框的显示与隐藏
      dialogVisible1: false,
    };
  },
  methods: {
    handleRemove() {},
    uploadImg(){},
    // 删除数据
    deleteRow(row) {
      this.$axios({
        url: "/contractTemplate/delete",
        method: "GET",
        params: { id: row.id},
      }).then((res) => {
        // this.tableData = res.data;
         this.showtable()
        console.log(res);
      });
    },
    // 提交表格数据
    async resetForm() {
      const test = this.tableData;
      // console.log(test)
      const atest = this.tableData1;
      // console.log(atest)
      // 将两个数组合为一个数组
      const table = test.concat(atest);
      console.log(table);
    },
    // 删除费用表格的当前行数据
    // deleteRow (index, rows) {
    //   rows.splice(index, 1)
    //   this.addForm.index--
    // },
    // 确定按钮添加数据到表格中
    addRow(addForm) {
      this.$refs[addForm].validate((valid) => {
        if (!valid) {
          return this.$message.warning("表单填写有误，请检查！");
        } else {
          this.$axios({
            url: "/contractTemplate/insert",
            method: "POST",
            data: this.addForm
          }).then((res) => {
            // this.tableData = res.data;
            console.log(res);
            if(res.code===0){

              this.showtable()
              this.dialogVisible = false
            }
          });
          this.$message.success("添加成功！");
          this.$refs[addForm].resetFields();
        }
      });
    },
    //获取上传文件的路径
    handleChange(file, fileList) {
      console.log(file, fileList);
      this.$axios({
        url:"/uploadTemplate",
        method:"post",
        data: {
          image: file.raw,
      },
      headers:{
        'Content-Type': 'multipart/form-data'
      },
      }).then((res) => {
        this.addForm.templateStyle = res.data
      console.log(res);
    });
    },
    showtable(){
      this.$axios({
      url: "/contractTemplate/list",
      method: "GET",
      data: {
        page: 1,
        limit: 10,
      },
    }).then((res) => {
      this.tableData = res.data;
      // console.log(res);
    });
    },
  },
  created() {
    this.showtable()
  },
  
  
};
</script>

<style lang="less" scoped>
.el-card {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
}

.tm {
  text-align: center;
  font-size: 20px;
}

.btns {
  width: 200px;
  position: absolute;
  right: 0px;
  bottom: -9px;
  display: flex;
  padding-bottom: 20px;
  justify-content: space-around;
  div {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
  }
  div:hover {
    color: #409eff;
  }
}
// .add-btn {
//     position: absolute;
//     right: 29px;
//     top: 160px;
// }

.add-btn1 {
  position: relative;
  left: 887px;
  top: 63px;
}

.el-table {
  margin-top: 20px;
}

.el-form-item {
  margin-right: 30px;
}

a{
  text-decoration: none;
  color: #409eff;
}
</style>>
  